<template>
  <view class="pages-view">
    <up-navbar
      class="top-nav"
      :safeAreaInsetTop="true"
      :fixed="true"
      @leftClick="onClickLeft"
      @rightClick="onClickRight"
      :bgColor="bgColor"
      :placeholder="true"
      height="88rpx"
      :border="border"
    >
      <template #center v-if="!IsSearch && rType != 'auto'">
        <view class="title" style="font-size: 34rpx; color: #000000"
          >{{ title }}
        </view>
      </template>
      <template #center v-if="rType == 'auto'">
        <slot name="center"></slot>
      </template>

      <template #center v-if="IsSearch">
        <view class="search-k">
          <van-icon
            name="search"
            size="36rpx"
            color="#86909C"
            class="search-icon"
          />
          <van-icon
            name="close"
            size="36rpx"
            color="#86909C"
            class="search-icon2"
            v-if="search"
            @click="cancelFun"
          />
          <input
            v-model="search"
            placeholder="输入名称/拼音码/条码"
            placeholder-class="input-placeholder"
            @confirm="searchFun"
            @blur="blurFun"
            @focus="focusFun"
          />
        </view>
      </template>
      <template #left>
        <view class="left-icon"
          ><van-icon name="arrow-left" color="#000000" size="36rpx" /><text>{{
            rType == "code" ? "返回" : "返回"
          }}</text></view
        >
      </template>
      <!-- <template #right v-if="rType == 'save'">
        <text class="right-icon">保存</text>
      </template> -->
      <template #right v-if="rType == 'cancel'">
        <text class="right-cancel" @click="cancelFun" v-if="!isShowCode">
          取消
        </text>
        <up-icon
          v-if="isShowCode"
          name="scan"
          color="#86909C"
          size="50rpx"
          @click="scanFun"
        ></up-icon>
      </template>

      <template #right v-if="rType == 'code'">
        <!-- <text class="right-cancel" @click="orFun"> 切换摄像头 </text> -->
      </template>

      <template #right v-if="rType == 'icon'">
        <view class="right-icon-icon">
          <!-- style="font-weight: bold" -->
          <view @click="searchFun"
            ><van-icon name="search" size="42rpx" color="#1D2129"
          /></view>
          <view @click="scanFun">
            <!-- style="font-weight: bold" -->
            <van-icon name="scan" size="42rpx" color="#1D2129"
          /></view>
        </view>
      </template>
      <template #right v-if="rType == 'iconSearch'">
        <view class="right-icon-icon">
          <view @click="searchFun"
            ><van-icon name="search" size="42rpx" color="#1D2129"
          /></view>
          <!-- <view @click="scanFun">
            <van-icon name="scan" size="38rpx" color="#1D2129"
          /></view> -->
        </view>
      </template>
      <template #right v-if="rType == 'customize' || rType == 'auto'">
        <slot name="right"></slot>
      </template>
    </up-navbar>
  </view>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
const emit = defineEmits([
  "save",
  "search",
  "scan",
  "orcode",
  "blurfun",
  "focusfun",
]);
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "标题";
    },
  },
  value: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  clickable: {
    type: Boolean,
    default: () => {
      return true;
    },
  },
  rType: {
    type: String,
    default: () => {
      return " ";
    },
  },
  IsSearch: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  isShowCode: {
    type: Boolean,
    default: () => {
      return true;
    },
  },
  border: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  code: {
    type: String,
    default: () => {
      return "";
    },
  },
  bgColor: {
    type: String,
    default: () => {
      return "#ffffff";
    },
  },
});
const search = ref("");
const tabbarvalue = ref(props.value);
onShow(() => {
  console.log("sadas");
  // tabbarvalue.value = props.value\
  console.log("sadas", props.code);
  search.value = props.code;
});

watch(props, (newValue, oldValue) => {
  if (newValue.value !== 1) {
    tabbarvalue.value = newValue.value;
  }
  search.value = newValue.code;
});

// const tabdate=ref(
// )
const cancelFun = () => {
  search.value = "";
  emit("search");
};
const searchFun = () => {
  if (props.rType == "cancel") {
    emit("search", search.value);
  } else {
    emit("search");
  }
};
const blurFun = () => {
  emit("blurfun");
};
const focusFun = () => {
  emit("focusfun");
};
const orFun = () => {
  emit("orcode");
};
const scanFun = () => {
  emit("scan");
};

const onClickLeft = () => {
  var pages = getCurrentPages();
  console.log(pages);

  // #ifdef H5
  if (pages.length > 1) {
    history.back();
  } else {
    uni.navigateTo({
      url: "/pages/index/index",
    });
  }

  // #endif
  // #ifndef H5

  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.navigateTo({
      url: "/pages/index/index",
    });
  }
  // #endif
};
const onClickRight = () => {
  //   showToast("按钮");
  emit("save");
};
</script>

<style lang="scss" scoped>
.pages-view {
  position: relative;
  z-index: 900;
}
.top-nav {
  font-size: 36rpx;

  // ::v-deep .van-nav-bar__title {
  //   font-weight: bold;
  //   font-size: 34rpx !important;
  //   color: #000000;
  //   line-height: 48rpx;
  //   text-align: center;
  //   max-width: 80%;

  // }
  // ::v-deep .u-navbar__placeholder {
  //   height: 88rpx !important;
  // }

  // ::v-deep .u-navbar__content {
  //   height: 88rpx !important;
  // }
  //   ::v-deep .van-nav-bar {
  //     background-color: transparent;
  //   }
}
.left-icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 30rpx;
}
.right-icon {
  font-weight: bold;
  font-size: 30rpx;
  color: #1679fb;
  line-height: 48rpx;
  text-align: right;
  font-style: normal;
  text-transform: none;
}
.right-cancel {
  font-weight: 400;
  font-size: 30rpx;
  color: #1679fb;
  line-height: 48rpx;
  text-align: right;
}

.right-icon-icon {
  display: flex;
  align-items: center;
  view {
    margin-left: 24rpx;
    margin-top: 10rpx;
  }
}

.search-k {
  width: 480rpx;
  border-radius: 15rpx;
  border: 1px solid #ebedf0;
  overflow: hidden;
  height: 54rpx;
  background-color: #f2f3f5;
  //   background-color: red;
  margin-left: 34rpx;
  position: relative;
}
.search-icon {
  position: absolute;
  top: 50%;
  margin-top: -18rpx;
  left: 24rpx;
}
.search-icon2 {
  position: absolute;
  top: 50%;
  margin-top: -18rpx;
  right: 24rpx;
}
input {
  width: 480rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #1d2129;
  text-align: left;
  height: 54rpx;
  line-height: 54rpx;
  border-radius: 15rpx;
  padding-left: 64rpx;
  box-sizing: border-box;
  padding-right: 64rpx;
  //   width: 100%;
  //   height: 100%;
}
.input-placeholder {
  font-weight: 400;
  font-size: 24rpx;
  color: #86909c;
  text-align: left;
  height: 54rpx;
  line-height: 54rpx;
}
</style>
